<!--
 * @Author       : xiaowu wwl093000@163.com
 * @Date         : 2023-04-17 13:38:24
 * @LastEditTime : 2023-04-20 17:43:44
 * @LastEditors  : xiaowu wwl093000@163.com
 * @FilePath     : /erp-admin-ui/src/views/distribution/commission/index.vue
 * @Description  : -提成配置
-->
<template>
  <div class="app-container input-class">
    <el-tabs v-model="tabsValue" type="border-card" @tab-click="tabsClick">
      <el-tab-pane v-for="(item, index) in tabsList" :key="index" :label="item.label" :name="item.name">
        <el-form :model="form" ref="form" :rules="rules" :inline="true" label-width="150px">
          <div class="formBox" v-loading="loading">
            <div v-if="item.name == '0'" class="formBox-item">
              <el-form-item label="利润统计（%）">
                <el-input type="number" v-model="form.selfSupportProfit" placeholder=""></el-input>
              </el-form-item>
            </div>
            <div v-if="item.name == '1'" class="formBox-item">
              <el-form-item label="利润统计（%）">
                <el-input type="number" v-model="form.agentProfit" placeholder=""></el-input>
              </el-form-item>
              <el-form-item label="基价（￥）">
                <el-input type="number" v-model="form.basePrice" placeholder=""></el-input>
              </el-form-item>
            </div>
            <div v-if="item.name == '2'" class="formBox-item">
              <el-form-item v-for="(item, index) in companyList" :key="index" class="itemFlex" label="利润统计">
                <div class="itemFlex">
                  <el-select v-model="item.list" multiple placeholder="请选择" :disabled="item.disabled" @remove-tag="removeTag">
                    <el-option
                      v-for="i in options"
                      :key="i.value"
                      :label="i.label"
                      :value="i.value"
                      :disabled="i.disabled"
                    ></el-option>
                  </el-select>
                  <el-input class="inputWidth10" type="number" v-model="item.price" placeholder="利润（%）"
                    :disabled="item.disabled"></el-input>
                  <el-button type="primary" icon="el-icon-plus" circle @click="handleAdd"></el-button> <!-- 新增 -->
                  <el-button v-if="companyList.length != 1" type="danger" icon="el-icon-delete" circle
                    @click="handleDelete(index)"></el-button> <!-- 删除 -->
                </div>
              </el-form-item>
              <div class="button-box">
                <el-button type="primary" :loading="buttonLoading" @click="submit">提 交</el-button>
              </div>
            </div>
          </div>
        </el-form>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import { listCollectProductCategory } from "@/api/distribution";
export default {
  name: "bonusPage",
  data() {
    return {
      // 遮罩层
      loading: false,
      list: [],
      form: {},
      rules: {},
      buttonLoading: false,
      tabsValue: '0',
      tabsList: [
        {
          name: '0',
          label: '自营'
        }, {
          name: '1',
          label: '代运营'
        }, {
          name: '2',
          label: '公司店铺'
        }
      ],
      options: [{
        value: '0',
        label: '张三'
      }, {
        value: '1',
        label: '李四'
      }, {
        value: '2',
        label: '王五'
      }, {
        value: '3',
        label: '赵六'
      }, {
        value: '4',
        label: '李七'
      }],
      value: [],
      companyList: [
        {
          'list': [],
          'price': null,
          'disabled': false
        }
      ]
    };
  },
  created() {
  },
  methods: {
    // 切换选项卡
    tabsClick(tab, event) {
      // console.log(tab.name, event)
    },
    // 新增
    handleAdd() {
      const item = {
        'list': [],
        'price': null,
        'disabled': false
      };
      const length = this.companyList.length - 1;
      const currentItem = this.companyList[length];
      if (currentItem.list.length > 0 && currentItem.price) {
        for(var i = 0; i < currentItem.list.length; i++) {
          for(var j = 0; j < this.options.length; j++) {
            if (currentItem.list[i] == this.options[j].value) this.options[j].disabled = true
          }
        }
        this.companyList[length].disabled = true;
        this.companyList.push(item);
      } else {
        this.$modal.msgError("请完善表单内容");
      }
    },
    // 删除
    handleDelete(index) {
      const delItem = this.companyList[index];
      for(var i = 0; i < delItem.list.length; i++) {
        for(var j = 0; j < this.options.length; j++) {
          if (delItem.list[i] == this.options[j].value) this.options[j].disabled = false
        }
      }
      this.companyList.splice(index, 1);
      const length = this.companyList.length - 1;
      this.companyList[length].disabled = false;
    },
    // 单个删除
    removeTag(e) {
      for(var j = 0; j < this.options.length; j++) {
        if (e == this.options[j].value) this.options[j].disabled = false
      }
    },
    // 提交
    submit() {
      this.$refs["form"].validate((valid, obj) => {
        if (valid) {
          this.buttonLoading = true;
          this.loading = true;
          return
          updateCollectProduct(this.list).then(res => {
            this.$modal.msgSuccess("编辑成功");
          }).finally(() => {
            this.loading = false;
            this.buttonLoading = false;
          });
        } else {
          var a = [];
          for (let key in obj) {
            a.push(obj[key][0].message);
          }
          this.$message({
            message: a[0],
            type: "warning",
          });
          return false;
        }
      })
    }
  }
};
</script>

<style lang="scss">
.input-class {
  .el-form-item {
    margin: 22px 0;
  }

  .button-box {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 40px;
  }

  .itemFlex {
    width: 100%;
    display: flex !important;

    .el-select {
      width: 50%;
    }

    .el-form-item__content {
      flex: 1;
    }

    .inputWidth10 {
      width: 10%;
      margin: 0 10px;
    }
  }
}
</style>